<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  div {
    background-color: lightgrey;
    width: 300px;
    border: 15px solid pink;
    padding: 50px;
    margin: 20px;
  }
</style>



<h1>开头</h1>

<p>CSS 盒模型（框模型）实质上是一个包装每个 HTML 元素的盒子。
  它包括：边框、内边距（填充）、外边距以及实际的内容。</p>

<div>此文本是盒子里的内容。
  我们添加了 50px 的内边距，20px 的外边距和 15px 的绿色边框</div>

</body>

</html>